<template>
  <div class="callCenterConfig">
    <el-form
      class="m7-form callCenterConfigForm"
      :rules="callCenterConfigRules"
      ref="callCenterConfigForm"
      size="mini"
      :model="callCenterConfigForm"
      label-position="top"
    >
      <el-form-item label="外显方式">
        <div style="padding-bottom: 10px">
          <el-radio-group v-model="callCenterConfigForm.numberType">
            <el-radio label="number" style="width: 100px">按外显号</el-radio>
            <el-radio label="group">按外显号组</el-radio>
          </el-radio-group>
        </div>
        <m7Select
          v-show="callCenterConfigForm.numberType === 'group'"
          size="mini"
          filterable
          multiple
          collapse-tags
          :options="groupList"
          :defaultProps="{ value: '_id', label: 'name' }"
          v-model="callCenterConfigForm.groupList"
          placeholder="请选择外显号组"
        >
        </m7Select>
        <m7Select
          v-show="callCenterConfigForm.numberType === 'number'"
          size="mini"
          filterable
          multiple
          collapse-tags
          :options="numbersData"
          :defaultProps="{ value: 'number', label: 'number' }"
          v-model="callCenterConfigForm.numbers"
          placeholder="请选择外显号"
        >
        </m7Select>
        <div
          style="padding-top: 10px"
          v-show="callCenterConfigForm.numberType === 'group'"
        >
          <el-radio-group
            v-model="callCenterConfigForm.groupRule"
            style="margin-bottom: 15px"
          >
            <el-radio :label="0" style="width: 100px">随机</el-radio>
            <el-radio :label="1">按归属地</el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="整理时长" prop="restTime" style="width: 35%">
        <el-input
          v-model="callCenterConfigForm.restTime"
          type="number"
          size="mini"
        >
          <template slot="append">秒</template>
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Mixins } from 'vue-property-decorator'
import oprateMixin from '@/mixins/dialogOprate'
import { isNumber2 } from '@/utils/validate'
import { commonAction } from '@/utils/common'
interface ArrayObj {
  props: string
}
@Component({
  name: 'callCenterConfig'
})
export default class CallCenterConfig extends Mixins(oprateMixin) {
  public callCenterConfigForm: any = {
    numbers: [],
    numberType: 'number',
    groupList: [],
    groupRule: 0,
    restTime: '30'
  }

  private groupList: any = []

  private mounted () {
    this.getGroupList()
  }

  private validateRestTime = (rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('请输入整理时长'))
    } else if (value) {
      if (!isNumber2(value) || (value < 0 || value > 999)) {
        callback(new Error('请输入0~999的正整数'))
      } else {
        callback()
      }
    }
  }

  private callCenterConfigRules = {
    restTime: [{ validator: this.validateRestTime, trigger: 'blur' }]
  }

  public setCallCenterConfigData (data?: any) {
    if (data) {
      const allNums = this.numbersData.map((item: any) => item.number)
      const nums = data.numbers.filter(item => allNums.includes(item)) // 回显过滤掉已经停用的号码
      this.callCenterConfigForm = {
        numbers: nums || [],
        numberType: data.numberType || 'number',
        groupList: data.groupList || [],
        groupRule: data.groupRule || 0,
        restTime: data.restTime || '30'
      }
    } else {
      this.callCenterConfigForm = {
        numbers: [],
        numberType: 'number',
        groupList: [],
        groupRule: 0,
        restTime: '30'
      }
    }
    this.open()
  }

  private getGroupList (): void {
    const data: any = { url: '/call/action/config/number/group/query', method: 'POST' }
    commonAction(data).then((res) => {
      if (res && res.success && res.data) {
        this.groupList = res.data.group || []
      }
    })
  }

  @Prop(Array) public numbersData!: ArrayObj[] // 版本数据
}
</script>
<style lang="stylus" scoped>
.callCenterConfig
  margin-top 16px
</style>
